<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>

		<style type="text/css">
			body,html{height: 100%;}
			#box{width: 640px;height: 100%;display: -webkit-box;-webkit-box-orient: vertical;}
			.header-top{height: 90px;background: #a90506;position: relative;}
			.btn{position: absolute;left: 26px;top: 24px;}
			.header-top h2{text-align: center;line-height: 90px;color: #FFFFFF;font-size: 26px;}
			.btn i{color: #fff;font-size: 30px;} 
			.content{background: #f3eff0;padding-top:6px;-webkit-box-flex: 1;}
			.car-shop{border:none;outline:none;font-size:20px;color:#fff;position: absolute;right: 35px;top: 24px;height: 50px;width: 104px;background:#c80f0d;border-radius: 14px 14px;}
			.luck-draw{height: 568px;margin: 20px;background: #a90506;}
			.luck-draw ul{text-align: center;}
			.luck-draw li{height: 186px;width:200px;float: left;}
			.luck-draw li:nth-child(5){color:#fff;background:#640000;font-size: 60px;text-align: center;line-height: 186px;}
			.active{background: #fff;}
			.draw{height: 400px;margin: 20px;background: #ff4948;overflow: scroll;}
			.draw li{height: 40px;line-height: 40px;color: #620001;font-size: 30px;}
			.draw li span{padding-left: 20px;}
			.nam{padding:0 30px;width: 70px;display: inline-block; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
		</style>
	</head>
	<body>
		<div id="box">
			<header class="header-top">
			 <button class="btn"><i class="iconfont">&#xe619;</i></button>
			 <h2>转盘抽奖</h2>
			 <button class="car-shop">退出登录</button>
			    
			</header>
			<section class="content">
				<div class="luck-draw">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li class="special">抽奖</li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
				<div class="draw">
					<ul class="name-list">
					</ul>
				</div>
			</section>
		</div>
		
	</body>
	<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
	<script type="text/javascript">
	  $(function(){
	  	$(".special").on("click",function(){
	  		var speed=50;
	  		var index=0;
	  		var timer='';
	  		var arr=getArr();
	  		var n=Math.floor(Math.random()*8)
	  		function getArr(){
	  			var aLi=$(".luck-draw li")
	  			var arr1=[];
	  			arr1[0]=aLi[0]
	  			arr1[1]=aLi[1]
	  			arr1[2]=aLi[2]
	  			arr1[3]=aLi[5]
	  			arr1[4]=aLi[8]
	  			arr1[5]=aLi[7]
	  			arr1[6]=aLi[6]
	  			arr1[7]=aLi[3]
	  			return $(arr1)
	  		}
	  		move()
	  		function move(){
	  		timer=setTimeout(function(){
	  			speed+=50;
	  			arr.removeClass('active')
	  			arr.eq(index).addClass('active')
	  			index++;
	  			if(index>7){
	  				index=0;
	  			}
	  			if(speed>500){
	  				speed=500;
	  			}
	  			if(index==n){
	  				if(speed>=500){
	  					alert("您获得了"+n+"等奖")
	  				}else{
	  					move()
	  				}
	  			}else{
	  				move()
	  			}
	  		},speed)
	  		}
	  	})
	  	luckdraw()
	  	function luckdraw(){
	  		$.ajax({
	  			type:'GEt',
	  			url:'http://datainfo.duapp.com/lottery/getsuerfr.php',
	  			dataType:'jsonp',
	  			success:function(data){
	  				$.each(data,function(index){
	  					var oLi=$("<li><span>"+data[index].fruit+"</span><span class='nam'>"+data[index].userID+"</span><span>"+data[index].timer+"</span></li>")
	  					$(".name-list").append(oLi)
	  				})
	  			}
	  		})
	  	}
	  	
	  	
	  	
	  })
	
	
		function bodyScale(){
				var devicewidth=document.documentElement.clientWidth;
				var scale=devicewidth/640;
				document.body.style.zoom=scale;
			}
			window.onresize=window.onload=function(){
				bodyScale();
			}
	
	</script>
</html>
